<style>
</style>
<div class="layui-layout book-config-wrapper" style="padding:0 20px;">
    <div id="search-wrapper">
        <div class="layui-form">
            <div class="layui-row">
                <div class="layui-inline inline-input">
                    <select name="channel" class="channel" lay-verify="">
                        <option value="1">男频</option>
                        <option value="2">女频</option>
                    </select>
                </div>
                <div class="layui-inline inline-input">
                    <select name="channel" class="topic" lay-verify="">
                        <option value="1">banner</option>
                        <option value="2">主编推荐</option>
                        <option value="3">热门小说</option>
                        <option value="4">VIP专区</option>
                        <option value="9">单本专区</option>
                    </select>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn search" data-type="reload">搜索</button>
                    <button class="layui-btn layui-btn-normal add">新增</button>
                    <button class="layui-btn layui-btn-danger empty">清空</button>
                </div>
            </div>
        </div>
    </div>
    <table class="layui-hide" id="table_list" lay-filter="table_filter">
    </table>
</div>
<script>
    layui.use(['table','form'], function(){
        var table = layui.table;

        var $ = layui.$;
        //方法级渲染
        table.render({
            elem: '#table_list'
            ,url: '/homepage/table'
            ,where: {channel: $(".channel").val(), topic: $(".topic").val()}
            ,cols: [[
                {field:'Sort', title: '序号', align:'center'},
                {field:'BookId', title: '小说Id', align:'center'},
                {field:'ChannelType', title: '频道类型', align:'center',templet:function (d) {
                        if(d.ChannelType == 1){
                            return "男频"
                        }else{
                            return "女频"
                        }
                    }},
                {field:'TopicType', title: '栏目类型', align:'center',templet:function (d) {
                        if(d.TopicType == 1){
                            return "banner"
                        }else if(d.TopicType == 2){
                            return "主编推荐"
                        }else if(d.TopicType == 3){
                            return "热门小说"
                        }else if (d.TopicType == 4){
                            return "VIP专区"
                        }else if (d.TopicType == 9){
                            return "单本专区"
                        }
                    }},
                {field:'BookName', title: '小说名称', align:'center'},
                {field:'', title: '操作', align:'center',templet:function (d) {
                        return `<button class='layui-btn layui-btn-xs layui-btn-normal' onclick='editRow(` + d.SortId +`,` + d.ChannelType + `,` + d.TopicType +`,` + d.BookId +`,"` + d.BookName +`")'>编辑</button>
                                <button class='layui-btn layui-btn-xs  layui-btn-danger' onclick='delRow(` + d.SortId +`,` + d.ChannelType + `,` + d.TopicType +`,` + d.BookId +`)'>删除</button>`
                    }}
            ]]
            ,id: 'listReload'
            ,page: {
                curr: location.hash.replace('#!fenye=', '') //获取起始页
                ,hash: 'fenye' //自定义hash值
            }
            ,height: "full-200"
        });

        var active = {
            reload: function(){
                table.reload('listReload', {
                    where: {
                        channel:$(".channel").val(),
                        topic:$(".topic").val()
                    }
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        };


        $('#search-wrapper .search').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $(".add").click(function () {
            var isNone = $(".layui-none").length;
            var channel = $(".channel option:selected").val();
            var channel_type = $(".channel option:selected").text();
            var topic = $(".topic option:selected").val();
            var topic_type = $(".topic option:selected").text();
            layer.open({
                content: `
                    <form class="layui-form">
                      <div class="layui-form-item">
                        <label class="layui-form-label">频道：</label>
                        <div class="layui-input-block" style="line-height: 36px;text-align: center">
                            ` + channel_type + `
                        </div>
                      </div>
                      <div class="layui-form-item">
                        <label class="layui-form-label">栏目：</label>
                        <div class="layui-input-block" style="line-height: 36px;text-align: center">
                            ` + topic_type + `
                        </div>
                      </div>
                      <div class="layui-form-item">
                        <label class="layui-form-label" style="color: red;">id：</label>
                        <div class="layui-input-block">
                          <input type="text" required  lay-verify="required" placeholder="请输入id"  class="layui-input book-id" onblur="getName(` + channel + `)">
                        </div>
                      </div>
                      <div class="layui-form-item">
                        <label class="layui-form-label">书名：</label>
                        <div class="layui-input-block book-name" style="line-height: 36px;text-align: center;background: #eee" data-id="0">
                        </div>
                      </div>
                    </form>`,
                yes: function(index, layero){
                    //do something
                    if($(".book-name").attr("data-id") == 0){
                        layer.msg("请输入完整信息");
                    }else{
                        $.ajax({
                            type:'post',
                            url:'{{urlfor "HomepageController.Add"}}',
                            data:{channel:channel,topic:topic,id:$(".book-id").val()},
                            success:function (data) {
                                if(data.status == 0){
                                    if(isNone == 1){
                                        active.reload();
                                    }else{
                                        $(".layui-laypage-btn").click();
                                    }
                                    layer.msg(data.message);
                                }else{
                                    layer.msg(data.message);
                                }
                            }
                        })
                    }
                    //layer.close(index); //如果设定了yes回调，需进行手工关闭
                }
            });
        });

    });

    function getName(channel) {
        $.ajax({
            type:'get',
            url:'/book/getbook?id='+$(".book-id").val() + '&channel='+channel,
            success:function (data) {
                if(data.code == 0 && data.data){
                    $(".book-name").html(data.data.Name).attr("data-id",1);
                }else {
                    $(".book-name").html("查询不到该小说").attr("data-id",0);
                }
            }
        })
    }

    function editRow(sortId,channel,topic,bookId,bookName) {
        var channel_type,topic_type;
        if (channel == 1){
            channel_type = "男频";
        }else {
            channel_type = "女频";
        }
        if(topic == 1){
            topic_type = "banner"
        }else if(topic == 2){
            topic_type = "主编推荐"
        }
        else if(topic == 3){
            topic_type = "热门小说"
        }
        else if(topic == 4){
            topic_type = "VIP"
        }
        layer.open({
            content: `
                    <form class="layui-form">
                      <div class="layui-form-item">
                        <label class="layui-form-label">频道：</label>
                        <div class="layui-input-block" style="line-height: 36px;text-align: center">
                            ` + channel_type + `
                        </div>
                      </div>
                      <div class="layui-form-item">
                        <label class="layui-form-label">栏目：</label>
                        <div class="layui-input-block" style="line-height: 36px;text-align: center">
                            ` + topic_type + `
                        </div>
                      </div>
                      <div class="layui-form-item">
                        <label class="layui-form-label" style="color: red">id：</label>
                        <div class="layui-input-block">
                          <input type="text" required  lay-verify="required" placeholder="请输入id"  class="layui-input book-id" onblur="getName(` + channel + `)" value="` + bookId + `">
                        </div>
                      </div>
                      <div class="layui-form-item">
                        <label class="layui-form-label">书名：</label>
                        <div class="layui-input-block book-name" style="line-height: 36px;text-align: center;background: #eee" data-id="1">
                        ` + bookName + `
                        </div>
                      </div>
                    </form>`,
            yes: function(index, layero){
                //do something
                if($(".book-name").attr("data-id") == 0){
                    layer.msg("请输入完整信息");
                }else{
                    $.ajax({
                        type:'post',
                        url:'{{urlfor "HomepageController.Edit"}}',
                        data:{channel:channel,topic:topic,id:$(".book-id").val(),sortId:sortId},
                        success:function (data) {
                            $(".layui-laypage-btn").click();
                            layer.msg(data.message);
                        }
                    })
                }
                //layer.close(index); //如果设定了yes回调，需进行手工关闭
            }
        });
    }

    function delRow(sortId,channel,topic,bookId) {
        layer.open({
            title:'提示',
            content: '确定要要删除吗？',
            yes: function(index, layero){
                //do something
                $.ajax({
                    type:'post',
                    url:'{{urlfor "HomepageController.Del"}}',
                    data:{channel:channel,topic:topic,bookId:bookId,sortId:sortId},
                    success:function (data) {
                        $(".layui-laypage-btn").click();
                        layer.msg(data.message);
                    }
                });
                layer.close(index); //如果设定了yes回调，需进行手工关闭
            }
        });
    }

    $(".empty").click(function(){
        layer.open({
            title:'提示',
            content: '确定清空该频道该栏目的内容吗？',
            yes: function(index, layero){
                //do something
                $.ajax({
                    type:'post',
                    url:'{{urlfor "HomepageController.Empty"}}',
                    data:{channel:$(".channel").val(),topic:$(".topic").val()},
                    success:function (data) {
                        if(data.status == 0){
                            $(".layui-laypage-btn").click();
                            layer.msg(data.message);
                        }else {
                            layer.msg(data.message);
                        }
                    }
                });
                layer.close(index); //如果设定了yes回调，需进行手工关闭
            }
        });
    });

</script>